OHNOLZA 숙박예약서비스(3) - 쓰로틀링

(해당 포스팅은 2023년 11월에 작성되었습니다)

OHNOLZA 바로가기!
레포 바로가기!

이번 포스팅부터는 오놀자 리펙토링에 대해 다루겠습니다. 기능 구현 자체는 열심히 했지만, 정작 디테일에 대해서는 신경을 많이 못썼습니다. 우선 가장 먼저 떠오른건 중복요청을 제거해주는 부분입니다.

특정 버튼을 광클해서 api요청이 다발적으로 발생하는 경우는 보편인 상황은 아니라 생각합니다. 그러나 이러한 부분 하나하나 신경쓰며 디테일을 잡아주는게 좋은 개발 습관이고, 결과적으로 좋은 소프트웨어를 만들어간다고 생각합니다. 디바운싱을 쓸지 쓰로틀링을 쓸지 고민했고, 결과적으로는 쓰로틀링을 통해 중복요청을 방지해주었습니다.

디바운싱 vs 쓰로틀링

디바운싱은 측정 구간 중 마지막 요청만 잡아줍니다. 따라서 검색 API를 호출하는 경우에 쓰기 적합하다고 생각합니다. 반면 더보기, 무한스크롤, 그리고 로그인과 같이 클릭 이벤트를 통해 API가 호출되는 경우는 디바운싱을 써도 훌륭하지만, 측정 구간 중 첫번째 요청에만 응답하는 쓰로틀링기법이 더 부드러운 반응을 보여줍니다.

따라서 클릭이벤트만 존재하는 이번 프로젝트에서는 디바운싱이 아닌 쓰로틀링을 채택합니다. 쓰로틀링을 채택하고 구현하는데 있어서 Debounce 와 Throttle 리액트로 구현하기 해당 블로그 포스팅이 많은 도움을 주었습니다.

쓰로틀링 구현

쓰로틀링을 어떻게 하면 재사용 가능하도록 구현할까 고민했고, custom 훅으로 구현하여 재사용성을 높였습니다.

useThrottle

: 위의 코드와 같이 0.5초로 지정해주었고, handleThrottle함수의 매개변수로 쓰로틀링이 적용될 함수를 전달합니다.

코드적용

결과

적용전

적용후

레퍼런스

Debounce 와 Throttle 리액트로 구현하기